<template>
  <div class="network_content">
    <div>
        <div class="content_title" flex="dir:top main:justify">
          <img @click="comeback()" class="content_title_back" src="../../assets/img/wx/mode/back.png" alt=""/>
          <headline :txt="text" :txtStyle="textStyle"></headline>
        </div>
        <div class="content_pic_box">
          <img class="content_pic_person" src="../../assets/img/wx/cooperate/network_person_png.png"
               alt=""/>
          <img class="content_pic_map" src="../../assets/img/wx/cooperate/network_map.png" alt=""/>
        </div>
    </div>
    <div class="network_detail">
        <div>
          <h3 class="introduce_title_h3">网点介绍</h3>
          <div class="introduce_title_green_line"></div>
        </div>
        <div>
          <p class="network_introduce_content">
            2017年我们公司已经完成浙江,附件地区的20家二级网点建设.2018年公司将在全国设立100多家销售服务网点,力争完成1万辆新能源汽车销售,运营的目标.
          </p>
        </div>
      <div class="content_network_built">
        <div>
          <h3 class="introduce_title_h3">现有网点</h3>
          <p class="introduce_title_green_line"></p>
        </div>
        <div class="network_built_items">
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div class="network_built_item">
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
          <div>
            <img class="network_built_item_green_point" src="../../assets/img/wx/about/advertise_posint.png"
                 alt=""/>
            <span class="network_built_name">舟山市和通汽车租赁有限公司</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Headline from "../mode/components/headline"
  export default {
    name: "network",
    components: {
      Headline
    },
    data() {
      return {
        text: "网点分布",
        textStyle: {
          "font-size": "21px",
          "color": "#ffffff"
        },
      }
    },
    methods: {
      comeback() {
        this.$router.back();
      }
    }
  }
</script>

<style scoped>
  .network_content {
    background: black;
    padding-bottom: 66px;
  }

  .content_title {
    height: 421px;
    padding: 5vh 33px 110px 33px;
  }

  .content_title_back {
    height: 59px;
    width: 59px
  }

  .content_title_h2 {
    color: white;
    font-size: 49px;
    font-weight: normal;
    text-align: center;
  }

  .content_pic_box {
    width: 100%;
    height: 325px;
  }

  .content_pic_person {
    width: 100%;
    height: 325px;
    padding: 0 33px;
    position: absolute;
    overflow: hidden;
    z-index: 1;
  }

  .content_pic_map {
    width: 456px;
    height: 309px;
    position: absolute;
    z-index: 2;
  }

  .network_detail {
    padding: 140px 33px 0;
  }

  .introduce_title_h3 {
    color: white;
    letter-spacing: 2px;
    font-size: 42px;
    font-weight: normal;
  }

  .introduce_title_green_line {
    width: 84px;
    height: 1px;
    margin-top: 16px;
    background: #0B9874;
  }
  .content_network_built{
    margin-top: 103px;
  }

  .network_introduce_content {
    color: white;
    padding-top: 66px;
    font-size: 28px;
    line-height: 44px;
    text-indent: 60px;
  }

  .network_built_name {
    color: white;
    font-size: 25px;
    margin-left: 51px;
  }

  .network_built_item_green_point {
    width: 16px;
    height: 16px;
  }

  .network_built_items {
    margin-top: 66px;
  }

  .network_built_item {
    margin-bottom: 23px;
  }
</style>
